<script setup lang="ts">
import Item from "./item.vue"

const headMenu = inject<any>('headMenu')
defineProps({
  teleportProps: {
    type: Object,
  },
  menus: {
    type: Object
  },
})


</script>

<template>
  <template v-for="(menu, index) in menus" :key="index">
    <template v-if="menu.children">
      <lay-dropdown-sub-menu>
        <template #prefix>
          <j-icon :name="menu.icon"></j-icon>
        </template>
        <template #default>{{ menu.title }}</template>
        <template #content>
          <Item :menus="menu.children"></Item>
        </template>
      </lay-dropdown-sub-menu>
    </template>
    <template v-else>
      <lay-dropdown-menu-item class="head-menu" :class="{'lay-this':menu.id===headMenu.selectKey}"
                              @click="headMenu.handleMenu(menu)">
        <template #prefix>
          <j-icon :name="menu.icon"></j-icon>
        </template>
        <template #default>{{ menu.title }}</template>
      </lay-dropdown-menu-item>
    </template>
  </template>
</template>

<style lang="less" scoped>
.head-menu {
  display: flex;
  justify-content: start;
}

.lay-this {
  background: var(--global-primary-color) !important;
  color: #fff !important;
}
</style>
